
import styles from './index.less'
import {
  
    Input, Space,
    Button, Upload, message,
    Select, Pagination, Image,
    Drawer, Form, Switch
} from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { forwardRef, useEffect, useRef, useState } from 'react';
import { IRouteComponentProps, KnowledgeModelState, useDispatch, useSelector } from 'umi';

const { Dragger } = Upload;
interface ItemType {
    page: number,
    flag: boolean
}

const KnowledgeDrawer:React.FC<ItemType> = ({page,flag}) => {
    const dispatch = useDispatch();
    console.log(page,flag,'props....');
    // 获取数据
    const { knowledgeList, knowledgeLength, KnowledgeDrawerFile, KnowledgeDrawerFileLength } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);

    // 实现新建抽屉效果
    const [visible, setVisible] = useState<boolean>(flag);
    const [childrenDrawer, setChildrenDrawer] = useState(false);


    // 关闭抽屉
    const onClose = () => {
        setVisible(false);
    };

    // 开关
    const [check, setChecked] = useState(false);
    function onChange(checked: boolean) {
        setChecked(checked);
    }
    // 子盒子开关
    function showChildrenDrawer() {
        setChildrenDrawer(true);
    }
    function onChildrenDrawerClose() {
        setChildrenDrawer(false);

    }
    // 云存储
    // 通过获取之前存储的信息达到取得登录态
    let head = JSON.parse(localStorage.getItem("header") as string);

    // input框的图片地址
    const [url, setUrl] = useState('');
    // 图片上传input框值移除
    function moveOutInputValue() {
        setUrl('');
    }
    const myRef = useRef(null);
    const props = {
        name: 'file',
        multiple: true,
        headers: {
            Authorization: head
        },
        action: 'https://creationapi.shbwyz.com/api/file/upload?unique=0',
        onChange(info: any) {
            const { status } = info.file;
            if (status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                message.success(`${info.file.name} file uploaded successfully.`);
                console.log(info, 'info......', info.file.response.data.url);
                console.log(myRef, 'myRef...');
                setUrl(info.file.response.data.url);

            } else if (status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
        onDrop(e: any) {
            console.log('Dropped files', e.dataTransfer.files);
        },
        showUploadList: false
    };
    // 抽屉点击卡片实现 切换图片上传地址
    function changeUrl(params: string) {
        setUrl(params);
        setChildrenDrawer(false);
    }

    // 实现抽屉图文数据获取
    const [DrawPage, setDrawPage] = useState(1);
    function drawerChange(page: number, pageSize: number) {
        setDrawPage(page);
    }
    useEffect(() => {
        dispatch({
            type: 'knowledge/getKnowledgeDrawerList',
            payload: DrawPage
        })
    }, [DrawPage])
    // 创建文字的编辑和禁用切换
    const [Text, changeText] = useState('');
    function titleChange(e: React.ChangeEvent) {
        changeText((e.target as HTMLInputElement).value);
    }
    // 创建功能的实现
    const inputTitle = useRef(null);
    const inputDescribe = useRef(null);
    async function createKnowList() {
        await dispatch({
            type: 'knowledge/createKnowledgeList',
            payload: {
                cover: (myRef as any).current.input.value,
                isCommentable: check,
                summary: (inputDescribe as any).current.resizableTextArea.props.value,
                title: (inputTitle as any).current.input.value
            }
        });
        await dispatch({
            type: 'knowledge/getKnowledgeList',
            payload: { page }
        })
        setVisible(false);
    }

    return <div className={styles.drawer}>
        {/* 第一个抽屉 */}
        <Drawer title="新建知识库" placement="right" visible={visible} width={693} extra={
            <Space>
                <span onClick={onClose} style={{ fontSize: '20px' }}>x</span>
            </Space>
        } closable={false}
            footer={
                <div className={styles.footer}>

                    <Button onClick={onClose}>
                        取消
                    </Button>
                    {
                        Text.length ? <Button type="primary" onClick={createKnowList}>
                            创建
                        </Button> : <Button type="primary" disabled>
                            创建
                        </Button>
                    }

                </div>
            }
        >
            <div className={styles.drawerFist}
            >
                <Form>
                    <Form.Item name={'title'} label="名称" >
                        <Input onChange={titleChange} ref={inputTitle} />
                    </Form.Item>
                    <Form.Item name={'summary'} label="描述">
                        <Input.TextArea ref={inputDescribe} />
                    </Form.Item>
                    <Form.Item name={'isCommentable'} label="评论">
                        <Switch defaultChecked={false} onChange={onChange} />
                    </Form.Item>
                    <Form.Item name={'cover'} label="封面">
                        {url ? <div style={{ background: `url(${url}) no-repeat center` }}> <Dragger {...props} >
                            <div style={{ background: `url(${url}) center `, backgroundSize: 'cover', width: '100%', height: '120px' }}></div>
                        </Dragger></div> : <div> <Dragger {...props}  >
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
                            <p className="ant-upload-text">
                                文件将上传到 OSS, 如未配置请先配置
                            </p>
                        </Dragger></div>}
                    </Form.Item>
                    <Form.Item>
                        <Input ref={myRef} value={url} />
                    </Form.Item>
                    <Form.Item >
                        <Button onClick={showChildrenDrawer} style={{ marginRight: '10px' }}>
                            选择文件
                        </Button>
                        {
                            url ? <Button onClick={moveOutInputValue} danger>
                                移除
                            </Button> : null
                        }

                        <Drawer
                            title="文件选择"
                            width={693}
                            closable={false}
                            onClose={onChildrenDrawerClose}
                            visible={childrenDrawer}
                            zIndex={3333}
                            getContainer={false}
                            extra={
                                <Space>
                                    <span onClick={onChildrenDrawerClose} style={{ fontSize: '20px' }}>x</span>
                                </Space>
                            }
                        >
                            {/* 第二个抽屉 */}
                            <div className={styles.childDrawer}>
                                <div className={styles.drawer_top}>
                                    <div>
                                        <div className={styles.onelabel}>
                                            <label htmlFor="pageTile">文件名:</label><Input type="text" placeholder='请输入文件名' id='pageTile' />
                                        </div>
                                        <div className={styles.twolabel}>
                                            <label htmlFor="pageTile">文件类型:</label><Input type="text" placeholder='请输入文件类型' id='pageTile' />
                                        </div>
                                    </div>
                                    <div className={styles.btns}>
                                        <Button type='primary'>
                                            <span>搜索</span>
                                        </Button>
                                        <Button>
                                            <span>重置</span>
                                        </Button>
                                    </div>
                                </div>
                                <div className={styles.drawer_main}>
                                    <div className={styles.upload}>
                                        <Button>上传文件</Button>
                                    </div>
                                    <div className={styles.list_box_drawer}>
                                        {
                                            KnowledgeDrawerFile && KnowledgeDrawerFile.map((item) => {
                                                return <div className={styles.box}>
                                                    <div className={styles.inset}>
                                                        <Image src={item.url} alt="" height='120px' width='100%' />
                                                        <div>
                                                            <span onClick={() => changeUrl(item.url)}>{item.originalname}</span>
                                                        </div>
                                                    </div>

                                                </div>
                                            })
                                        }

                                    </div>
                                    <div className={styles.drawerPagination}>
                                        <Pagination
                                            total={KnowledgeDrawerFileLength}
                                            showTotal={total => `共 ${total} 条`}
                                            defaultPageSize={12}
                                            defaultCurrent={1}
                                            onChange={drawerChange}
                                        />
                                    </div>

                                </div>
                            </div>
                        </Drawer>

                    </Form.Item>
                </Form>
            </div>
        </Drawer>
    </div>
}

export default KnowledgeDrawer;

